<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-emoji"></i> 自定义图标
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<h2>使用方法</h2>
			<p style="line-height: 50px;">直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标）</p>
			<p class="example-p">
				<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i>
				<span>&lt;i class=&quot;el-icon-lx-redpacket_fill&quot;&gt;&lt;/i&gt;</span>
			</p>
			<p class="example-p">
				<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i>
				<span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
			</p>
			<p class="example-p">
				<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i>
				<span>&lt;i class=&quot;el-icon-lx-emojifill&quot;&gt;&lt;/i&gt;</span>
			</p>
			<br />
			<h2>图标</h2>
			<div class="search-box">
				<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
			</div>
			<ul>
				<li class="icon-li" v-for="(item,index) in list" :key="index">
					<div class="icon-li-content">
						<i :class="`el-icon-lx-${item}`"></i>
						<span>{{item}}</span>
					</div>
				</li>
			</ul>

			<!-- qrcode -->
			<el-button type="primary" @click="createQrcode">生成二维码</el-button>
			<div id="qrcode"></div>
			<!-- qrcode_end -->
		</div>
	</div>
</template>

<script>
	import {
		computed,
		ref,
		nextTick
	} from "vue";
	import QRCode from 'qrcodejs2-fix';
	export default {
		name: "icon",
		setup() {
			const iconList = [
				"attentionforbid",
				"attentionforbidfill",
				"attention",
				"attentionfill",
				"tag",
				"tagfill",
				"people",
				"peoplefill",
				"notice",
				"noticefill",
				"mobile",
				"mobilefill",
				"voice",
				"voicefill",
				"unlock",
				"lock",
				"home",
				"homefill",
				"delete",
				"deletefill",
				"notification",
				"notificationfill",
				"notificationforbidfill",
				"like",
				"likefill",
				"comment",
				"commentfill",
				"camera",
				"camerafill",
				"warn",
				"warnfill",
				"time",
				"timefill",
				"location",
				"locationfill",
				"favor",
				"favorfill",
				"skin",
				"skinfill",
				"news",
				"newsfill",
				"record",
				"recordfill",
				"emoji",
				"emojifill",
				"message",
				"messagefill",
				"goods",
				"goodsfill",
				"crown",
				"crownfill",
				"move",
				"add",
				"hot",
				"hotfill",
				"service",
				"servicefill",
				"present",
				"presentfill",
				"pic",
				"picfill",
				"rank",
				"rankfill",
				"male",
				"female",
				"down",
				"top",
				"recharge",
				"rechargefill",
				"forward",
				"forwardfill",
				"info",
				"infofill",
				"redpacket",
				"redpacket_fill",
				"roundadd",
				"roundaddfill",
				"friendadd",
				"friendaddfill",
				"cart",
				"cartfill",
				"more",
				"moreandroid",
				"back",
				"right",
				"shop",
				"shopfill",
				"question",
				"questionfill",
				"roundclose",
				"roundclosefill",
				"roundcheck",
				"roundcheckfill",
				"global",
				"mail",
				"punch",
				"exit",
				"upload",
				"read",
				"file",
				"link",
				"full",
				"group",
				"friend",
				"profile",
				"addressbook",
				"calendar",
				"text",
				"copy",
				"share",
				"wifi",
				"vipcard",
				"weibo",
				"remind",
				"refresh",
				"filter",
				"settings",
				"scan",
				"qrcode",
				"cascades",
				"apps",
				"sort",
				"searchlist",
				"search",
				"edit",
			];
			const keyword = ref("");
			const list = computed(() => {
				return iconList.filter((item) => {
					return item.indexOf(keyword.value) !== -1;
				});
			});
			//生成二维码
			const createQrcode = () => {
				nextTick(() => {
					document.getElementById("qrcode").innerHTML = "";
					new QRCode(document.getElementById("qrcode"), {
						text: '000000'
					});
				})

			};

			return {
				iconList,
				keyword,
				list,
				createQrcode
			};
		},
	};
</script>

<style scoped>
	.example-p {
		height: 45px;
		display: flex;
		align-items: center;
	}

	.search-box {
		text-align: center;
		margin-top: 10px;
	}

	.search {
		width: 300px;
	}

	ul,
	li {
		list-style: none;
	}

	.icon-li {
		display: inline-block;
		padding: 10px;
		width: 120px;
		height: 120px;
	}

	.icon-li-content {
		display: flex;
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.icon-li-content i {
		font-size: 36px;
		color: #606266;
	}

	.icon-li-content span {
		margin-top: 10px;
		color: #787878;
	}
</style>
